<template>
  <div>
    <div>
      <el-select v-model="form.processingStatus" placeholder="结算状态" style="width: 200px;height: 10px;font-size: 5px">
        <el-option label="未处理" value="1"></el-option>
        <el-option label="跟进中" value="2"></el-option>
        <el-option label="已完结" value="3"></el-option>
      </el-select>
      <input v-model="form.feedbackPerson" placeholder="请输入反馈内容/反馈人" class="responsive-width">&nbsp;&nbsp;&nbsp;
      <el-button type="primary" @click="sousuo">高级搜索</el-button>
      <el-button type="primary" @click="chongzhi">重置</el-button>
    </div>
    <div>
      <span style="float: left;font-weight: bold">意见反馈</span><br><br>
      <template>
        <el-table :data="this.guiList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column label="ID" align="center" prop="id">
            <template slot-scope="scope">
                  <span style="color: blue; text-decoration: underline;"
                        @click="feeback(scope.row)">{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="问题类型" align="center" prop="questionType">
            <template slot-scope="scope">
              <span>{{ scope.row.questionType == 1 ? 'App建议' : scope.row.questionType == 2?'活动建议':'其他' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="反馈内容" align="center" prop="feedbackContent">
            <template slot-scope="scope">
              <span>{{ scope.row.feedbackContent }}</span>
            </template>
          </el-table-column>
          <el-table-column label="反馈人" align="center" prop="feedbackPerson">
            <template slot-scope="scope">
              <span>{{ scope.row.feedbackPerson }}</span>
            </template>
          </el-table-column>
          <!--      <el-table-column label="商品属性" align="center" prop="spshu"    //   console.log("===================="{this.push:huatupian:this.pagenum=1}<span></span>/>-->
          <el-table-column label="来源" align="center" prop="source">
            <template slot-scope="scope">
              <span>{{ scope.row.source }}</span>
            </template>

          </el-table-column>

          <el-table-column label="反馈时间" align="center" prop="feebackTime" width="180">
            <template slot-scope="scope" v-if="scope.row.feebackTime!=null">
              {{ scope.row.feebackTime|format('yyyy-MM-dd hh:mm:ss') }}
            </template>
          </el-table-column>
          <el-table-column label="处理时间" align="center" prop="processingTime" width="180">
            <template slot-scope="scope" v-if="scope.row.processingTime!=null">
              {{ scope.row.processingTime|format('yyyy-MM-dd hh:mm:ss') }}
            </template>
          </el-table-column>
          <el-table-column label="处理状态" align="center" prop="processingStatus">
            <template slot-scope="scope">
              {{ scope.row.processingStatus == 1 ? '未处理' : scope.row.processingStatus == 2 ? '跟进中' : '已完结' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <div v-if="scope.row.processingStatus==1 || scope.row.processingStatus==2" @click="huifu(scope.row)">
                <van-icon name="edit"/>
                <span icon="el-icon-edit">回复</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div>
      <el-dialog
          title="回复反馈"
          :visible.sync="dialogVisible"
          width="600px"
          :before-close="handleClose">
        回复内容：
        <div style="width: 200px">
        <el-form ref="feebackd" :model="this.feebackd" :rules="rules" label-width="80px">
          <input type="text" v-model="feebackd.huiContent" style="width: 500px;height: 200px"><br>
        </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit2">确 定</el-button>
            </span>
      </el-dialog>
    </div>
    <div>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNumber"
          :page-sizes="[2, 4, 6, 8]"
          :page-size=pageSize
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import index from "vue-lazyload";
import axios from "axios";

export default {
  filters: {
    format(value, arg) {
      function dateFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d+)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          "M": date.getMonth() + 1, //月份
          "d": date.getDate(), //日
          "h": date.getHours(), //小时
          "m": date.getMinutes(), //分
          "s": date.getSeconds(), //秒
          "q": Math.floor((date.getMonth() + 3) / 3), //季度
          "S": date.getMilliseconds() //毫秒
        };
        format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
          var v = map[t];
          if (v !== undefined) {
            if (all.length > 1) {
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
          }
          return all;
        });
        return format;
      }

      return dateFormat(value, arg);

    }
  },
  data() {
    return {
      activeIndex: '6',
      tableData: [{}],
      guiList: [{}],
      pageNumber: 1,
      pageSize: 2,
      total: 0,
      multipleSelection: [],
      form: {
        feedbackPerson: '',
        processingStatus: '',
      },
      dialogVisible: false,
      dialogVisible2: false,
      idd: '',
      phone: '',
      // registerIp:'',
      names: '',
      tupian: [],
      feebackd: {},
    };
  },
  methods: {
    //
    other() {
      this.$router.push(
          {path: "/otherView"}
      )
    },
    baoguo() {
      this.$router.push(
          {path: "/OutPackage"}
      )
    },
    huiyuan() {
      this.$router.push(
          {path: "/expressList"}
      )
    },


    caiwu() {
      this.$router.push({
        path: '/zhanghuPage'
      })
    },
    huifu(rows) {
      this.dialogVisible = true;
      this.feebackd = rows;
    },
    feeback(row) {
      this.$router.push(
          {
            path: "/feebackXiangPage",
            query: {
              id: row.id,
              status: row.processingStatus,
            },
          })
    },
    shouji(row) {
      this.$router.push(
          {
            path: "/expressDetial",

            query: {
              phone: row.phone,
              status: row.type,
            },
          })
    },

    zhixiang(row) {
      this.$router.push(
          {
            path: "/zhiXiangPage",
            query: {
              id: row.id,
              status: row.status,
            },
          })
    },
    handleClose() {
      this.dialogVisible = false;
      this.dialogVisible2 = false;
    },
    zhanghu() {
      this.$router.push({
        path: '/zhanghuPage'
      })
    },
    submit2() {
      console.log("create================")
      axios.post('http://localhost:8878/feeback/updateExpressFeeback2', this.feebackd).then(res => {
        console.log(res.data)
        if (res.data == '1') {
          this.$message({
            message: '操作成功',
            type: 'success'
          });
          this.dialogVisible = false;
          this.init()
        } else {
          this.$message.error('操作失败');
          this.init()
        }
      })
    },
    submit() {
      axios.get('http://localhost:8876/account/updatestatus1?id=' + this.idd).then(response => {
        console.log("===============" + response.data)
        if (response.data == 1) {
          this.$message({
            message: '锁定成功',
            type: 'success'
          });
          this.dialogVisible = false;
          this.init();
        } else {
          this.$message({
            message: '锁定失败',
            type: 'error'
          });
          this.init();
        }
      });
    },
    dianji2(row) {
      this.dialogVisible2 = true;
      console.log("]]]]]]]]]]]]]]]" + row.id);
      this.idd = row.id;
      this.phone = row.phone;
    },
    dianji(row) {
      this.dialogVisible = true;
      console.log("]]]]]]]]]]]]]]]" + row.id);
      this.idd = row.id;
      this.phone = row.phone;
    },
    chongzhi() {
      this.form = {
        feedbackPerson: '',
        processingStatus: ''
      };
    },
    goToMachine() {
      this.$router.push({
        path: '/machineHome'
      })
    },
    sousuo() {
      this.init();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.init();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNumber = val;
      this.init();
    },
    shouye() {
      this.$router.push({
        path: '/'
      })
    },

    index() {
      return index
    },
    handleSelect(key) {
      console.log("-----------------" + key);
    },
    init() {
      axios.get('http://localhost:8878/feeback/list?pageNum=' + this.pageNumber + '&pageSize=' + this.pageSize + '&feedbackPerson=' + this.form.feedbackPerson + '&processingStatus=' + this.form.processingStatus).then(response => {
        this.guiList = response.data.list;
        this.total = response.data.total;


      });
    }
  },
  created() {
    // axios.get('http://localhost:8876/account/list').then(response=>{
    //   this.guiList=response.data;
    //   console.log("===================="+this.guiList);
    // });
    this.init();

  }
};
</script>

<style lang="less">
#app {
  margin-top: 0;
}

.responsive-width {
  width: 300px;
}

.home-container {
  height: 100%;
}

.el-header {
  background-color: #545c64;
  display: flex; //设置显示为flex布局
  justify-content: space-between; //设置为flex左右布局
  padding-left: 0; //左内边距为0（Logo贴左边）
  align-items: center; //元素上下居中（防止右边按钮贴上下边）
  color: #fff;
  font-size: 18px;

  > div {
    //内嵌的div样式
    display: flex;
    align-items: center; //Logo和文字上下居中
    span {
      width: 200px;
      margin-left: 10px; //文字左侧设置间距，防止与Logo紧贴
    }
  }
}

#indexMenu {
  width: 100%;
}

.el-menu {
  background-color: #545c64;
}

.el-aside {
  background-color: #545c64;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}

.el-main {
  background-color: #eaedf1;
}
</style>